<template>
  <div class="newExtensionContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          推广二维码
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="box-ct">
          <div id="qrcode"></div>
          <span class="title-c">复制优惠券链接</span>
          <el-input style="margin-left:0.3rem;" ref="marketLink" v-model="data.marketLink"></el-input>
          <el-button class="ok" type="primary" @click="copyUrlToClipBord">复制</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
import QRCode from "qrcodejs2"; // 引入qrcode
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      data: {},
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.data = data;
      vm.qrcode(vm.data.marketLink);
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        $('#qrcode').html("");
      }, 500);
    },
    /**生成二维码 */
    qrcode(url) {
      let qrcode = new QRCode("qrcode", {
        width: 132,
        height: 132,
        text: url, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },
    /**复制到剪切板 */
    copyUrlToClipBord() {
      this.$refs.marketLink.select();
      let successful = document.execCommand("copy");
      if (successful) {
        this.$message({
          message: "成功复制到剪贴板",
          type: "success"
        });
      } else {
        this.$message.error("该浏览器不支持点击复制到剪贴板");
      }
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.newExtensionContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .box-ct {
      padding-bottom: 0.4rem;
    .el-input {
      width: 4.5rem !important;
    }
    .title-c {
      width: 100%;
      display: inline-block;
      margin-bottom: 0.1rem;
      margin-left: 0.3rem;
    }
    #qrcode {
      display: flex;
      justify-content: center;
      margin: 0.16rem 0;
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 6rem;
}
</style>


